import React from 'react';
import {
    View,
    Text,
    Image,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
    FlatList,
}from 'react-native'
import BasePage from '../Component/Common/BasePage';
import NavigationBar from 'teaset/components/NavigationBar/NavigationBar';
import CommonStyle from '../CommonStyle'
import ScannerViewPage from '../Control/QRScannerViewPage'
let screenW = Dimensions.get('window').width;
let screenH = Dimensions.get('window').height;
import BlueTooth from './BlueToothPage'
import BlueToothPage from './BlueToothPage';

export default class AddDevicePage extends BasePage{
    renderNavigationBar(){
        return (
            <NavigationBar 
                title='添加设备'
                leftView={<NavigationBar.BackButton  onPress={()=>this.navigator.pop()} />}
            />
        )
    }
    renderPage(){
        return (
            <View style={{flex:1,backgroundColor:'white'}}>
                <View style={{height:120 ,backgroundColor:'#white', flexDirection:'row',marginTop:64}} >
                    <TouchableOpacity style={{marginTop:25, width:80, height:70,marginLeft:(screenW-160)/3 ,alignItems:'center', justifyContent:'center'}} onPress={()=>{
                        this.navigator.push({view:<ScannerViewPage />})
                    }} >
                        <Image style={{width:40,height:40}} source={require('../images/scanM.png')}/>
                        <Text style={{paddingTop:10}}>{'扫码添加'}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={{marginTop:25, width:80, height:70,marginLeft:(screenW-160)/3, alignItems:'center', justifyContent:'center' }} onPress={()=>{
                        this.navigator.push({view:<BlueTooth/>})
                    }} >
                        <Image style={{width:40,height:40}} source={require('../images/蓝牙.png')}/>
                        <Text style={{paddingTop:10}}>{'蓝牙配对'}</Text>
                    </TouchableOpacity> 
                </View>
                <View style={{height:2,backgroundColor:'#f2f2f2'}}/>
                <Text style={{marginTop:10,marginLeft:20 ,height:30}}>最常添加设备</Text>
                <View style={{height:1,backgroundColor:'#f2f2f2'}}/>
                <FlatList
                    data={[{deviceName:'欧司朗彩虹系列WIFI灯泡',key:1 },{
                        deviceName:'欧司朗彩虹系列WIFI二代灯泡',key:2
                    },{
                        deviceName:'精灵ELF多功能跑步机',key:3
                    },{
                        deviceName:'美的智能定速空调',key:4
                    },{
                        deviceName:'九阳豆浆机',key:5
                    },{
                        deviceName:'雷士浴霸',key:6
                    }]}
                    renderItem={this._renderItem}
                    keyExtractor={this._keyExtractor}
                />
            </View>
        );
    }
    _renderItem=({index,item})=>{
        return (
            <TouchableOpacity style={{height:80, }} onPress={()=>{
                this.navigator.push({view:<BlueToothPage/>})
            }} >
                <View style={{flex:1,flexDirection:'row',alignItems:'center'}}>
                    {/* <Image style={{width:40,height:40, marginLeft:10,}} source={require('../images/蓝牙.png')}/> */}
                    <Text style={{marginLeft:20}} >{item.deviceName}</Text>
                    <Image style={{position:'absolute' ,width:18 ,height:20 ,right:20 }} source={require('../images/更多.png')} />
                </View>
                <View style={{height:2,backgroundColor:'#f2f2f2'}}/>
            </TouchableOpacity>
        );
    }
    _keyExtractor=(index,item)=>{
        return index;
    }
}